<template>
  <div class="hello">
    <router-link :to="{ name: 'home'}" style="text-decoration: none;"><h3 style="color: #00AEEC;font-size: 24px;font-weight: bold;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">JQ直播</h3></router-link>
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#f0f0f0"
        active-text-color="#409EFF"
        style="border-right:0">

      <el-menu-item v-for="(item) in noChildren" :key="item.name" @click="menuClick(item)" :index="item.id">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title" style="color: #000000">{{item.label}}</span>
      </el-menu-item>

      <el-submenu v-for="item in hasChildren" :key="item.name" >
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
          <el-menu-item :index="subItem.name">{{subItem.label}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      menuData: [
        {
          id:"1",
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'home'
        },
        {
          id:"2",
          path: '/collect',
          name: 'collect',
          label: '关注',
          icon: 'star-off',
          url: 'collect'
        },
        // {
        //   label: '其他',
        //   icon: 'location',
        //   name: 'other',
        //   children:[
        //     {
        //       path: '/bf',
        //       name: 'page1',
        //       label: '页面1',
        //       icon: 'setting',
        //       url: 'Other/PageOne'
        //     },
        //     {
        //       path: '/test',
        //       name: 'page2',
        //       label: '页面2',
        //       icon: 'setting',
        //       url: 'Other/PageTwo'
        //     }
        //   ]
        // },

      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    menuClick(item) {
      // 当页面的路由与跳转的路由不一致才进行跳转
      if(this.$route.path !== item.path && !(this.$route.path === '/home' && item.path === '/')){
        this.$router.push(item.path)
      }
    }
  },
  computed:{
    // 没有子菜单
    noChildren(){
      return this.menuData.filter(item => !item.children)
    },
    // 有子菜单
    hasChildren(){
      return this.menuData.filter(item => item.children)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

h3{
	    text-align: center;
    	line-height: 48px;
    	font-size: 16px;
   	 	font-weight: 400;
  }

</style>

